<template>
  <div>
    <Header v-if="$route.name == '' ? currentAnchors : showHeader" />
    <nuxt />
    <Footer />
  </div>
</template>

<script>
import Footer from "@/components/home/footer";
import Header from "@/components/home/header";
import { mapState } from "vuex";
export default {
  components: {
    Footer,
    Header
  },
  data() {
    return {
      showHeader: true
    };
  },
  mounted() {
    window.addEventListener("scroll", this.load, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.load, false);
  },
  methods: {
    load(e) {
      var top = Math.floor(
        document.body.scrollTop ||
          document.documentElement.scrollTop ||
          this.$refs.scroll.scrollTop
      );
      top > 144 ? (this.showHeader = false) : (this.showHeader = true);
    }
  }
};
</script>

<style>
#fp-nav {
  margin-top: 0 !important;
}
html,
body,
#app,#__nuxt,#__layout,.app {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  font-family: SourceHanSansCN-Regular;
}

li {
  list-style: none;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.slide-fade-enter-active {
  transition: all 0.5s ease;
}

.slide-fade-enter,
.slide-fade-leave-to,
.slide-fade2-enter,
.slide-fade2-leave-to,
.slide-fade1-enter,
.slide-fade1-leave-to {
  transform: translateY(50px);
  opacity: 0;
}

.flip-list-enter-active {
  transition: all 1s ease;
}

.opacity-enter-active {
  transition: all 1s ease;
}

.translateYAnimation-enter-active {
  transition: all 1s ease;
}
.translateYAnimation-enter,
.translateYAnimation-leave-to {
  transform: translateY(200px);
  opacity: 0;
}
.opacity-enter,
.opacity-leave-to {
  opacity: 0;
  transform: scale(0.1);
}

.flip-list-enter,
.flip-list-leave-to {
  transform: translateX(200px);
  opacity: 0;
}
</style>
